<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="common/css/cssgrids-min.css"/>
    <link rel="stylesheet" type="text/css" href="common/css/cssnormalize-min.css"/>
    <link rel="stylesheet" type="text/css" href="common/css/cssfonts-min.css"/>
    <link rel="stylesheet" type="text/css" href="common/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="common/css/bootstrap1.css"/>
    <script src="common/js/jquery-1.9.1.min.js"></script>
    <script src="common/js/bootstrap.js"></script>
    <script src="common/js/knockout-2.2.1.js"></script>

	<script>
	    // Class to represent a row in the seat reservations grid
	    function SlideReservation(url, index) {
	        var self = this;
	        self.url = url;
	        self.index = index;
	    }
	    // Overall viewmodel for this screen, along with initial state
	    function ReservationsViewModel() {
	        var self = this;
	        // Editable data
	        self.slides = ko.observableArray([
	            new SlideReservation("common/img/ad_1.png", 0),
	            new SlideReservation("common/img/ad_2.png", 1),
	            new SlideReservation("common/img/ad_1.png", 2),
	            new SlideReservation("common/img/ad_2.png", 3),
	            new SlideReservation("common/img/ad_1.png", 4)
	        ]);
	    }
		
	    $(function(){
	    	ko.applyBindings(new ReservationsViewModel());
	    	$(".carousel").carousel({
 				 interval: 2000
			});
	    });
	</script>
</head>
<body>

<!-- header -->
<iframe src="/webs/static/header.html" scrolling="no" frameborder="no" border="0" 
	style="width:100%;height:142px;margin:0 auto;"></iframe>

<!-- main body -->
<div id="main" class="index">
    <div id="slideshow">
        <!-- slide -->
        <div class="yui3-g ctnWidth" id="myCarousel">
            <div class="slideshow carousel">
                <div class="sld-img carousel-inner" data-bind="foreach: slides">
                	<!-- ko if: index == 0 -->
                    <div class="item active"><img data-bind="attr: {src:url}" alt="sldimg"/></div>
					<!-- /ko -->
					<!-- ko ifnot: index == 0 -->
                    <div class="item"><img data-bind="attr: {src:url}" alt="sldimg"/></div>
					<!-- /ko -->
                </div>
                <ul class="sld-nav carousel-indicators">
					<li class="active" data-target="#myCarousel" data-slide-to="0" ></li>
					<li class="" data-target="#myCarousel" data-slide-to="1"></li>
					<li class="" data-target="#myCarousel" data-slide-to="2"></li>
					<li class="" data-target="#myCarousel" data-slide-to="3"></li>
					<li class="" data-target="#myCarousel" data-slide-to="4"></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- display -->
    <div id="display">
        <div class="ctnWidth">
            <div class="grid yui3-g">
                <div class="grid-row yui3-g display">
                    <div class="grid-unit yui3-u-1-3">
                        <em class="index index-1 active"></em>
                        <div class="description">
                            <h2>Snail Phone</h2>
                            <p>纯感PureMotion超敏感触屏<br/>纯景PureView暗光拍摄技术<br/>创新的无线充电技术<br/></p>
                        </div>
                        <div class="price">
                            <h3 class="text-orange">￥ 2399</h3>
                            <a href="webs/snailphone/static/product.html">立即购买</a>
                        </div>
                        <div class="preferential">
                            <a href="webs/snailphone/static/product.html">更多会员优惠 &gt;&gt;</a>
                        </div>
                    </div>
                    <div class="grid-unit yui3-u-1-3">
                        <em class="index index-2"></em>
                        <div class="description">
                            <h2>Snail Phone</h2>
                            <p>纯感PureMotion超敏感触屏<br/>纯景PureView暗光拍摄技术<br/>创新的无线充电技术<br/></p>
                        </div>
                        <div class="price">
                            <h3 class="text-orange">￥ 2399</h3>
                            <a href="webs/snailphone/static/product1.html">立即购买</a>
                        </div>
                        <div class="preferential">
                            <a href="webs/snailphone/static/product1.html">更多会员优惠 &gt;&gt;</a>
                        </div>
                    </div>
                    <div class="grid-unit yui3-u-1-3">
                        <em class="index index-3"></em>
                        <div class="description">
                            <h2>Snail Phone</h2>
                            <p>纯感PureMotion超敏感触屏<br/>纯景PureView暗光拍摄技术<br/>创新的无线充电技术<br/></p>
                        </div>
                        <div class="price">
                            <h3 class="text-orange">￥ 2399</h3>
                            <a href="webs/snailphone/static/product2.html">立即购买</a>
                        </div>
                        <div class="preferential">
                            <a href="webs/snailphone/static/product2.html">更多会员优惠 &gt;&gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<iframe src="/webs/static/footer.html" scrolling="no" frameborder="no" border="0" marginheight="0" 
	style="width:100%; height:300px; margin:0 auto;"></iframe>
<div id="footer-div"></div>

</body>
</html>
